<template>
  <div class="card">
    <div class="el-row">
      <div class="img-card">
        <img :src="userinfo.avatar_url" :alt="userinfo.nickname">
      </div>
      <div class="el-col-14 info el-col-offset-1">
        <div class="user-link">
          <p>{{userinfo.nickname}}</p>
        </div>
        <div class="sig">
          <p>{{userinfo.signature}}</p>
        </div>
      </div>
    </div>
    <div class="el-row">
      <div class="el-col-12" style="border-right: 1px rgb(229,229,229) solid">
        <h5 style="color: rgb(133,144,189); font-weight: normal; text-align: center">回答了</h5>
        <h4 style="text-align: center;line-height: 0.5em">{{userinfo.answer_num}}</h4>
      </div>
      <div class="el-col-12">
        <h5 style="color: rgb(133,144,189); font-weight: normal; text-align: center">粉丝数</h5>
        <h4 style="text-align: center;line-height: 0.5em">{{userinfo.fans_num}}</h4>
      </div>
    </div>
    <div style="height: 15px;"></div>
<!--    <div class="el-row" style="padding-bottom: 10px; padding-top: 10px">-->
<!--      <div class="el-col-12" style="text-align: center">-->
<!--        <el-button type="primary" v-if="F_B" @click="changeU" size="small">取消关注</el-button>-->
<!--        <el-button type="primary" v-else @click="changeF" size="small"><span class="iconfont infoIcon" style="vertical-align: -10%">&#xe829;</span>&nbsp;&nbsp;关注</el-button>-->
<!--      </div>-->
<!--      <div class="el-col-12" style="text-align: center">-->
<!--        <el-button size="small"><span class="iconfont infoIcon" style="vertical-align: -10%">&#xe69d;</span>&nbsp;&nbsp;私信</el-button>-->
<!--      </div>-->
<!--    </div>-->
  </div>

</template>
<script>
import {followUser, unFollowUser} from "@/network/user";

export default {
  name: "UserInfoCard",
  data() {
    return{
      F_B: false
    }
  },
  methods: {
    changeU() {
      this.F_B = !this.F_B
      unFollowUser(this.t_user_id,this.follow.user_id)
    },
    changeF() {
      this.F_B = !this.F_B
      followUser(this.t_user_id,this.follow.user_id)
    },
  },
  props: {
    userinfo: {
      type: Object,
      default: {
        avatar_url: "",     // 关注人用户头像
        user_id: 0,         // 关注人的id
        nickname: "nickname", // 回答问题的用户昵称
        signature: "",      // 关注人的简介
        fans_num: 0,        // 关注人粉丝数
        answer_num: 0       // 关注人回答数
      }
    },
    t_user_id: 0
  },
}
</script>

<style scoped lang="scss">

@import "../../src/assets/scss/common";
$main-radius: 10px;
@mixin simple-shadow {
  box-shadow: 0 1px 5px rgba(27,31,35, .15), 0 0 1px rgba(106,106,106, .15);
}

.card{
  @include simple-shadow();
  width: 300px;
  background-color: white;
}
.img-card {
  position: relative;
  top: -20px;
  background: #ffffff;
  border-radius: 10px;
  width: 82px;
  height: 82px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
  }
}

.user-link {
  font-weight: bold;
  font-size: 20px;
  margin-left: 10px;
  padding-top: 20px;
  //a {
  //  color: #4a8af4;
  //}
  //&:hover {
  //  text-decoration: underline;
  //}
}

.sig {
  margin-top: 0;
  font-weight: normal;
  font-size: 14px;
  margin-left: 10px;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.info {
  align-items: center;
}

.AF {
  margin-top: 0;
  font-weight: normal;
  font-size: 14px;
  margin-left: 10px;
}

.hah {
  &:hover {
    text-decoration: rgb(74,138,244);
  }
}

.but {
  align-items: center;
  display: flex;
}

h5 {
  margin: 0;
}

h4 {
  margin: 10px;
}
</style>
